<template>
  <li class="wioc-timeline-item">
    <div class="wioc-timeline-item__tail"></div>

    <div v-if="!$slots.dot"
      class="wioc-timeline-item__node"
      :class="[
        `wioc-timeline-item__node--${size || ''}`,
        `wioc-timeline-item__node--${type || ''}`
      ]"
      :style="{
        backgroundColor: color
      }"
    >
	  <wioc-icon-svg class="wioc-timeline-item__icon" v-if="icon" :name="icon"> </wioc-icon-svg>
    </div>
    <div v-if="$slots.dot" class="wioc-timeline-item__dot">
      <slot name="dot"></slot>
    </div>

    <div class="wioc-timeline-item__wrapper">
      <div v-if="!hideTimestamp && placement === 'top'"
        class="wioc-timeline-item__timestamp is-top">
        {{timestamp}}
      </div>

      <div class="wioc-timeline-item__content">
        <slot></slot>
      </div>

      <div v-if="!hideTimestamp && placement === 'bottom'"
        class="wioc-timeline-item__timestamp is-bottom">
        {{timestamp}}
      </div>
    </div>
  </li>
</template>

<script>
  export default {
    name: 'wioc-timeline-item',

    inject: ['timeline'],

    props: {
      timestamp: String,

      hideTimestamp: {
        type: Boolean,
        default: false
      },

      placement: {
        type: String,
        default: 'bottom'
      },

      type: String,

      color: String,

      size: {
        type: String,
        default: 'normal'
      },

      icon: String
    }
  };
</script>
<style scoped>
	.wioc-timeline {
		margin: 0;
		font-size: 14px;
		list-style: none
	}
	
	.wioc-timeline .wioc-timeline-item:last-child .wioc-timeline-item__tail {
		display: none
	}
	
	.wioc-timeline-item {
		position: relative;
		padding-bottom: 20px
	}
	
	.wioc-timeline-item__wrapper {
		position: relative;
		padding-left: 28px;
		top: -3px
	}
	
	.wioc-timeline-item__tail {
		position: absolute;
		left: 4px;
		height: 80%;
		margin-top: 0.13rem;
		border-left: 0.01rem solid #E4E7ED;
	}
	
	.wioc-timeline-item__icon {
		color: #FFF;
		font-size: 13px
	}
	
	.wioc-timeline-item__node {
		position: absolute;
		background-color: #E4E7ED;
		border-radius: 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center
	}
	
	.wioc-timeline-item__node--normal {
		left: 0;
		width: 0.08rem;
		height: 0.08rem;
	}
	
	.wioc-timeline-item__node--large {
		left: -2px;
		width: 14px;
		height: 14px
	}
	
	.wioc-timeline-item__node--primary {
		background-color: #409EFF
	}
	
	.wioc-timeline-item__node--success {
		background-color: #67C23A
	}
	
	.wioc-timeline-item__node--warning {
		background-color: #E6A23C
	}
	
	.wioc-timeline-item__node--danger {
		background-color: #F56C6C
	}
	
	.wioc-timeline-item__node--info {
		background-color: #909399
	}
	
	.wioc-timeline-item__dot {
		position: absolute;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center
	}
	
	.wioc-timeline-item__content {
		color: #303133
	}
	
	.wioc-timeline-item__timestamp {
		color: #909399;
		line-height: 1;
		font-size: 13px
	}
	
	.wioc-timeline-item__timestamp.is-top {
		margin-bottom: 8px;
		padding-top: 4px
	}
	
	.wioc-timeline-item__timestamp.is-bottom {
		margin-top: 8px
	}
	
</style>